<script setup lang="tsx">
import { ElConfigProvider } from 'element-plus'
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { ref } from 'vue';
import { useMenuStore } from './stores/menuStore';
import { useMainStore } from '@/stores/mainStore';
import { useWebsocketStore } from './stores/websocketStore';


const mainStore = useMainStore();
const menuStore = useMenuStore();
const websocketStore = useWebsocketStore();

mainStore.flushUnread();
websocketStore.connectWebsocket();

// menu automatic folding and expansion
// const handleResize = () => {
//   if (document.body.clientWidth < 1200) {
//     menuStore.toggleCollapse(true);
//   } else {
//     menuStore.toggleCollapse(false);
//   }
// }
//
// handleResize();
//
// window.addEventListener('resize', handleResize)


</script>

<template>
  <el-config-provider :locale="zhCn">
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </el-config-provider>
</template>

<style lang="scss">
#app {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC,
    Helvetica Neue, Noto Sans, Noto Sans CJK SC, Microsoft Yahei, Arial,
    Hiragino Sans GB, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 0.875rem;
  font-weight: 400;
  color: #2c3e50;
}

* {
  margin: 0;
  padding: 0;

  :focus-visible {
    outline: none;
  }

  &::-webkit-scrollbar {
    width: 6px;
    height: 10px;
  }

  &::-webkit-scrollbar-thumb {
    // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    background: #cdd0d6;
  }

  // &::-webkit-scrollbar-track {
  //   // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
  //   border-radius: 10px;
  //   background: #f5f7fa;
  // }
}
</style>
